<template>
  <a-modal
    :visible="visible"
    :confirm-loading="confirmLoading"
    width="60%"
    :title="'文本域配置'"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-table
      bordered
      :loading="tableLoading"
      :columns="columns"
      :dataSource="data"
      :pagination="false"
      size="small"
    >
      <template slot="id" slot-scope="text, record">
        <a-input
          v-if="record.editable"
          :style="{'width': '100%'}"
          :value="record.id"
          :placeholder="'请输入域名称'"
          @change="e => handleInputChange(e.target.value, record.key, 'id')"
        >
        </a-input>
        <span v-else>{{ record.id }}</span>
      </template>
      <template slot="type" slot-scope="text, record">
        <a-select v-if="record.editable" v-model="record.type" style="width:100%" @change="e => handleInputChange(e,record.key, 'type')" >
          <a-select-option v-for="item in $const.TEXT_SIGN_TYPE" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
        <span v-else>{{ record.type | getValue($const.TEXT_SIGN_TYPE) }}</span>
      </template>
      <template slot="msg" slot-scope="text, record">
        <template v-if="record.editable" >
          <a-input
            v-if="record.type == 'INPUT_TEXT'"
            :style="{'width': '100%'}"
            :value="text"
            :placeholder="'请输入域名称'"
            @change="e => handleInputChange(e.target.value, record.key, 'msg')"
          >
          </a-input>
          <span v-else>{{ record.type }}</span>
        </template>
        <template v-else >
          <span v-if="record.type == 'INPUT_TEXT'">{{ record.msg }}</span>
          <span v-else>{{ record.type }}</span>
        </template>

      </template>
      <template slot="operate" slot-scope="text, record">
        <span v-if="!record.editable">
          <a @click="clickEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定删除？" ok-text="删除" cancel-text="取消" @confirm="clickDelete(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
        <span v-else>
          <a @click="clickRowSave(record)">保存</a>
          <a-divider type="vertical" />
          <span v-if="record.isNew">
            <a-popconfirm title="确定删除？" ok-text="删除" cancel-text="取消" @confirm="clickDelete(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
          <a v-else @click="clickRowCancel(record)">取消</a>
        </span>
      </template>

    </a-table>
    <a-button block style="margin-top: 20px" type="dashed" icon="plus" @click="newRow(1)">新增文本域</a-button>
  </a-modal>
</template>
<script>
import { updatePDFConfig } from '@/api/overview/contract'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    config: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      id: '',
      confirmLoading: false,
      tableLoading: false,
      columns: [
        {
          title: '域名称',
          dataIndex: 'id',
          key: 'id',
          width: '20%',
          scopedSlots: { customRender: 'id' }
        },
        {
          title: '填充类型',
          dataIndex: 'type',
          key: 'type',
          width: '30%',
          scopedSlots: { customRender: 'type' }
        },
        {
          title: '填充数据',
          dataIndex: 'msg',
          key: 'msg',
          width: '30%',
          scopedSlots: { customRender: 'msg' }
        },
        {
          title: '操作',
          dataIndex: 'operate',
          key: 'operate',
          width: '20%',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      data: []
    }
  },
  watch: {
    visible (e) {
      this.data = []
      if (e && this.config) {
        this.id = this.config.id
        if (this.config.pdfFillConfig) {
          JSON.parse(this.config.pdfFillConfig).forEach(item => {
            this.data.push({
              key: Math.random().toString(36).substr(2, 10),
              id: item.id,
              type: item.type,
              msg: item.msg,
              editable: false
            })
          })
        }
      }
    }
  },
  filters: {
    getValue (type, list) {
      const data = list.find(item => {
        return item.id === type
      })
      console.log('ddd', data)
      if (data) {
        return data.name
      } else {
        return ''
      }
    }
  },
  methods: {

    // 新增行
    newRow (type) {
      const datas = {
        key: Math.random().toString(36).substr(2, 10),
        id: '',
        type: '',
        msg: '',
        editable: true
      }
      this.data.push(datas)
    },
    // input输入事件
    handleInputChange (value, key, column) {
      const newData = [...this.data]
      const target = newData.find((item) => key === item.key)
      if (target) {
        this.$set(target, column, value)
      }
    },

    handleOk () {
      if (!this.data || this.data.length === 0) {
        this.$message.error('请添加文本域配置!')
        return
      }
      const pdfFillConfig = []
      let msgTxt = ''
      if (this.data && this.data.length) {
        this.data.forEach(item => {
          if (item.type !== 'INPUT_TEXT') {
            item.msg = ''
          }
          pdfFillConfig.push({
            id: item.id,
            type: item.type,
            msg: item.msg
          })
          if (!item.id) {
            msgTxt = '请输入域名称'
          }
          if (!item.type) {
            msgTxt = '请选择填充类型'
          }
          if (item.type === 'INPUT_TEXT' && !item.msg) {
            msgTxt = '请输入自定义类型内容'
          }
        })
      }
      if (msgTxt) {
        this.$message.error(msgTxt)
      } else {
        this.confirmLoading = true
        updatePDFConfig({ id: this.id, pdfFillConfig: JSON.stringify(pdfFillConfig) }).then(res => {
          this.$emit('handleSuccess')
        }).finally(e => {
          this.confirmLoading = false
        })
      }
    },
    clickRowSave (row) {
      row.editable = false
      this.$forceUpdate()
    },
    clickRowCancel (row) {
      const target = this.data.find(item => item.key === row.key)
      Object.keys(target).forEach(key => {
        target[key] = target._originalData[key]
      })
      target.editable = false

      this.$forceUpdate()
    },
    // 删除当前行
    clickDelete (row) {
      const newData = this.data.filter(item => item.key !== row.key)
      this.data = newData
      this.$forceUpdate()
    },
    // 编辑当前行
    clickEdit (row) {
      const target = this.data.find(item => item.key === row.key)
      target._originalData = { ...target }
      target.editable = true
      this.$forceUpdate()
    },
    handleCancel () {
      this.$emit('handleCancel')
    }
  }
}
</script>
